define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'byd_setxq/index' + location.search,
                    add_url: 'byd_setxq/add',
                    edit_url: 'byd_setxq/edit',
                    del_url: 'byd_setxq/del',
                    multi_url: 'byd_setxq/multi',
                    import_url: 'byd_setxq/import',
                    table: 'byd_setxq',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'bydset.name', title: __('Bydset.name'), operate: 'LIKE'},
                        {field: 'bydsetleft.name', title: __('Bydsetleft.name'), operate: 'LIKE'},
                        {field: 'url', title: __('Url'), operate: 'LIKE', formatter: Table.api.formatter.url},
                        {field: 'image', title: __('Image'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image},
                        {field: 'imageid', title: __('Imageid'), operate: false, events:Controller.api.events.abc,
                            formatter:function (value ,row) {

                            var html='<img class=" code" src="'+row.imageid+'" style="width: 50px;height: 50px"></img>';
                                return html;
                            }
                            // Table.api.formatter.image
                        },

                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate},
                        {field: 'qr_code_address', title: __('二维码'), events:Controller.api.events.abc, formatter:function(value ,row, index){
                                return '<div class="qrcode'+row.v_id+' code">暂无</div>';
                            }},
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
            // table.on('post-body.bs.table', function (e, settings, json, xhr) {
            //     $(".btn-editone", this)
            //         .off("click")
            //         .removeClass("btn-editone")
            //         .addClass("btn-addtabs")
            //         .prop("title", __('Edit'));
            //
            //     // 预览图弹出处理
            //     $('img').parent('a').attr('href','javascript:;');//去掉图片oss连接地址
            //     $('img').bind('click',function(){
            //         var imgs = $(this).parents('td').find('a img');
            //         var dataJson = [],item={};
            //         for (var i = 0; i < imgs.length; i++) {
            //             item['alt'] = '';
            //             item['pid'] = Math.random()*10;
            //             item['src'] = item['thumb'] = $(imgs[i]).attr('src');
            //             dataJson.push(item);
            //             item = {}; // 重置
            //         }
            //         var json =  {
            //             "title": "", //相册标题
            //             "id": 123, //相册id
            //             "start": 0, //初始显示的图片序号，默认0
            //             "data": dataJson
            //         };
            //         Layer.photos({
            //             photos: json,
            //             anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            //         });
            //     })
            // });
        },

        add: function () {
            Controller.api.bindevent();

        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            },
            events:{
                abc:{
                    'click .code':function (e,value,row,index) {
                        console.log(row.imageid);
                        iframe=layer.open({
                            title: '图片详情',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area : ['700px' , '500px'],
                            content: `
    <div>
    <button  id="vr">VR</button>
    <button id="price">价格</button>
    <button id="fg">手指</button>
    </div>
    <div id="dvb" style="position: relative">
     <img  id="LiuYiFeiImg"  src="https://bao.scwushen.com/`+row.imageid+`" style="width: 50%;height: 50%">
</div>
    <button id="sure">确认</button>
`,


                        });

                        var isvr=false;
                        var isprice=false;
                        var isfg=false;
                        var all={
                            a:"",
                            b:"",
                            c:"",
                            d:"",
                            e:"",
                            f:""
                        };
                        var vr={
                            a:"",
                            b:""
                        };
                        var price={
                            c:"",
                            d:""
                        };
                        var fg={
                            e:"",
                            f:""
                        };

                        // setTimeout(()=>{
                        document.getElementById(
                            'vr'
                        ).addEventListener('click',() =>{
                             isvr=true;
                             isprice=false;
                             isfg=false;
                        });
                        document.getElementById(
                            'sure'
                        ).addEventListener('click',() =>{
                            console.log(vr,price,fg)
                            console.log(row.id);
                            var id = row.id;
                            var one = vr;
                            var two = price;
                            var three = fg;
                            $.post("byd_setxq/zb",{vr:one,price:two,fg:three,id:id},function (data) {

                            });
                        });
                        document.getElementById(
                            'price'
                        ).addEventListener('click',() =>{
                            isvr=false;
                            isprice=true;
                            isfg=false;
                        });
                        document.getElementById(
                            'fg'
                        ).addEventListener('click',() =>{
                            isvr=false;
                            isprice=false;
                            isfg=true;
                        });
                            document.getElementById(
                                'LiuYiFeiImg'
                            ).addEventListener('click',function qwer(e) {
                                e = e || window.event;
                                var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY;
                                console.log(x,y);
                                var class213="";
                                if(isvr){
                                    class213="123";
                                    vr.a=x
                                    vr.b=y
                                }
                                if(isprice) {
                                    class213="456";
                                    price.c=x-30
                                    price.d=y-30
                                }
                                if(isfg){
                                    class213="789";
                                    fg.e=x
                                    fg.f=y-30
                                }
                                createMarker(x,y,'dvb',class213)
                            })

                        // },2000)
                        function createMarker(x, y,divName,index) {
                            var ele= document.getElementsByClassName(index)[0]
                            if(ele){
                                document.getElementById(divName).removeChild(ele)
                            }
                            var div = document.createElement('div');
                            div.style.left = x-5 + 'px'; div.style.top = y-5 + 'px';
                            div.style.position = 'absolute';
                            div.style.borderRadius = '50%';
                            switch (index) {
                                case "123":
                                    div.style.backgroundColor = 'red';
                                    break;
                                case "456":
                                    div.style.backgroundColor = 'aqua';
                                    break;
                                case "789":
                                    div.style.backgroundColor = 'green';
                                    break;
                            }

                            div.style.width = '10px';
                            div.style.height = '10px';
                            div.className=index;

                            document.getElementById(divName).appendChild(div)
                        }
                        e.stopPropagation();
                        // $(".qrcode"+row.v_id).empty();
                        // $(".qrcode"+row.v_id).text('暂无');
                        // console.log(row);
                    }
                }}

        },


    };
    var ProportionHeightInImg; //鼠标所选位置相对于所选图片高度的比例
    var ProportionWidthInImg;//鼠标所选位置相对于所选图片宽度的比例
    function createMarker(x, y,divName) {
        var div = document.createElement('div');
         div.style.left = x + 'px'; div.style.top = y + 'px';
        div.style.position = 'absolute';
        div.style.color = 'red';
        div.style.width = '20px';
        div.style.height = '20px';
        document.getElementById(divName).appendChild(div)
    }
    // var ele= document.getElementById('LiuYiFeiImg');
    // console.log(ele,111)
    // if(ele){
    //     ele.addEventListener('click',qwer)
    //
    //
    // }



    return Controller;

});
